<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 使用伪元素方便的多 */
        .item::before{
            content: "123";
            color: aqua;
            font-size: 20px;
        }
        .item::after{
            /* content: "123"; */
            /* 也可以换成图片,这里一般不会写死，而是动态修改 */
            content: url('../images/hot_icon.svg');
            /* 然后图片位置不是很好，这里也是可以解决的 相对定位用来微调很方便 */
            position: relative; 
            left: 5px;
            top: 2px;
            color: antiquewhite;
            font-size: 20px;
        }
        .new::after{ 
            content: url();
        }

        /* 额外的补充 */
        /* 这里我们想加一个正方形 */
        /* 使用伪元素，一定不能将content省略 */
        .box5::after{
            content: "";
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: aqua;
            position: relative;
            left: 3px;
            top: -2px;
        }
    </style>
</head>
<body>
    <!-- 需求，在box里面前后加元素 -->
    <!-- 这里显示的时候，会发现有中间间隔了一点空格，主要是因为换行的问题，不换行就没事 -->
    <div class="box">
        <!-- 笨一点的方法，就是直接用span硬加，但是如果我们还想在.box2里面继续插入，是不是又要写一遍 -->
        <span class="before">123</span>
        我是div元素
        <span class="after">123</span>
    </div>

    <div class="box2">
        <!-- box2如果也要插入，还使用这种笨方法，就要copy一遍，很麻烦 -->
        <span class="before">123</span>
        我是div2元素
        <span class="after">123</span>
    </div>

    <!-- 这里使用伪元素去解决，而且因为不用换行，所以没有多余的空格 -->
    <div class="box3 item">我是div3</div>
    <!-- 如果box4也想生效，建议class都加个item -->
    <div class="box4 item">我是div4</div>

    <!-- 伪元素的补充 -->
    <div class="box5">我是div5</div>
</body>
</html>